<template>
<div>

  <!--  分隔-->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>对账单查询</div>
    </div></el-col>
  </el-row>
  <!--  查询条件-->
  <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
    <el-form-item label="对账单号">
      <el-input v-model="queryForm.statementId" placeholder="对账单号" clearable></el-input>
    </el-form-item>
    <el-form-item label="委托客户">
      <el-input v-model="queryForm.client" placeholder="委托客户" clearable suffix-icon="el-icon-search"
      @click.native="showClients()" readonly></el-input>
    </el-form-item>
    <el-form-item label="是否对账">
      <el-select v-model="queryForm.checked" clearable placeholder="请选择">
        <el-option value='是'></el-option>
        <el-option value='否'></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="info" @click="getList" plain>查询</el-button>
      <el-button type="info" @click="add()" plain>新增对账单</el-button>
    </el-form-item>
  </el-form>
<!--  分隔-->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
    </div></el-col>
  </el-row>
  <div id="s" class="animate__animated animate__zoomIn animate__delay-0.5s" style="margin-top: 20px">
  <!--  数据表格-->
  <el-table :data="tableData" style="width: 100%;" :border="true"
            :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
    <el-table-column
      type="index"
      label="序号"
      width="50"
      align="center">
    </el-table-column>
    <el-table-column
      prop="statementId"
      label="对账单编号"
      align="center"
      width="250">
    </el-table-column>
    <el-table-column
      prop="client"
      label="委托客户"
      align="center"
      show-overflow-tooltip
      width="200">
    </el-table-column>
    <el-table-column
      prop="currency"
      label="币种"
      align="center"
      width="100">
    </el-table-column>
    <el-table-column
      prop="total"
      align="center"
      label="含税总额(元)"
    width="180">
    </el-table-column>
    <el-table-column
      prop="checkedMoney"
      align="center"
      width="180"
      label="已收金额(元)">
    </el-table-column>
    <el-table-column
      prop="checked"
      label="是否对账"
      align="center"
      width="100">
    </el-table-column>
    <el-table-column
      prop="invoiceId"
      label="发票号码"
      align="center"
      width="250">
    </el-table-column>
    <el-table-column
      prop="checkedTime"
      label="对账时间"
      align="center"
      width="250">
    </el-table-column>
    <el-table-column
      prop="createUser"
      align="center"
      label="新增人员">
    </el-table-column>
    <el-table-column
      prop="createTime"
      align="center"
      label="新增时间">
    </el-table-column>
    <el-table-column
      prop="modifyUser"
      align="center"
      label="修改人员">
    </el-table-column>
    <el-table-column
      prop="modifyTime"
      align="center"
      label="修改时间">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      width="100">
      <template v-slot="scope" >
        <el-button @click="edit(scope.row)" type="text" size="small"  >查看</el-button>
        <el-popconfirm title="确定删除吗？" @confirm="remove(scope.row)">
          <el-button v-if="scope.row.checked!='是'" slot="reference" type="text" size="small"  >删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-light">
      <div style="margin: 20px"></div>
    </div>
    </el-col>
  </el-row>
  <!--  分页-->
  <el-pagination
    @size-change="getList"
    @current-change="getList"
    :current-page.sync="queryForm.pageNum"
    :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
    :page-size.sync="queryForm.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="margin: 20px"></div>
    </div></el-col>
  </el-row>
</div>
  <!--  客户查询-->
  <el-dialog
    title="客户"
    :visible.sync="showClient"
    width="50%">
    <div slot="footer" class="dialog-footer">
        <!--  查询条件-->
  <el-form :inline="true" :model="queryClient" style="text-align: left">
    <el-form-item label="客户编号">
      <el-input v-model="queryClient.customerId" placeholder="" clearable></el-input>
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="queryClient.customerName" placeholder="" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getClient">查询</el-button>
    </el-form-item>
  </el-form>
      <!--  数据表格-->
  <el-table :data="clients" style="width: 100%" :border="true" highlight-current-row
            @current-change="handleCurrentChange" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
    <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="customerId"
      label="客户编号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="customerName"
      label="客户公司全称">
    </el-table-column>
  </el-table>
      <!--  分页-->
  <div style="width: 65%;">
  <el-pagination
    @size-change="getClient"
    @current-change="getClient"
    :current-page.sync="queryClient.pageNum"
    :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
    :page-size.sync="queryClient.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="clientTotal">
  </el-pagination>
  </div>
  <el-button @click="cancle">取 消</el-button>
  <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "FinanceStatement",
  data() {
    return {
      //查询对象
      queryForm: {
        statementId: '',
        client: '',
        pageNum: 1,
        pageSize: 10
      },
      queryClient:{},
      //表格数组
      tableData: [],
      clients:[],
      //共多少条
      total: 0,
      clientTotal:0,
      selectClient:{},
      showClient:false
    }
  },
  methods: {
    //判断未对账的单据显示黄色
    checkedWarning({row, rowIndex}) {
      if (row.checked=='否') {
        return 'warning-row';
      }else {
      return ''
      }
    },
    //查询对账单列表
    getList() {
      this.$axios({
        url: 'finance/statement/getList',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //跳转到新增界面
    add() {
      this.$router.push("AddStatement")
    },
    //判断是否对账跳转到查看活着新增界面
    edit(row) {
      if(row.checked=='否'){
        this.$router.push({
          name: 'AddStatement',
          params: row
        })
      }else{
        this.$router.push({
          name:'ShowStatement',
          params:row
        })
      }
    },
    //删除对账单请求
    remove(row) {
      this.$axios({
        url: 'finance/statement/remove',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {
          this.$message.success(res.data.message)
          this.getList();
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //展开客户查询界面
    showClients(){
      this.showClient=true;
      this.getClient();
    },
    //查询客户请求
    getClient(){
      this.$axios({
        url: 'base/customer/getList',
        method: 'post',
        data: this.queryClient
      }).then(res => {
        if (res.data.success) {
          this.clients = res.data.object.list;
          this.clientTotal = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })

    },
    //取到选定的客户
    handleCurrentChange(val) {
      this.selectClient = val;
    },
    //选定的客户赋给查询条件
    confirm(){
      if(this.selectClient!=null){
        this.queryForm.client=this.selectClient.customerName;
      }
      this.showClient=false;
    },
    //清空查询条件，关闭对话框
    cancle(){
      this.queryForm.client='';
      this.showClient=false;
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 15px;
}

/deep/ .el-table .el-table__body td .cell:empty::after,
.el-table .el-table__body td .cell > span:empty::after,
.el-table .el-table__body td .cell .approval:empty::after,
.el-table .el-table__body td .cell div:empty::after,
.el-table .el-table__body td .cell .line-limit-length:empty::after {
  content: "--";
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}

</style>
<style>
.el-table .warning-row {
  background: oldlace !important;
}
.el-table__body tr.current-row > td {
  background-color: rgba(65, 225, 105, 0.45) !important;
}
</style>
